今天要實作的是一種常見的互動效果，「點擊並拖曳」。大家可以在下面實作範例中操作，按住滑鼠左鍵，將這串數字列表左右移動。

邏輯流程

1. 監聽mousedown事件，抓取點擊時的X及當下的滾輪位置
2. 監聽mouseup事件，移除效果
3. 監聽mousemove事件，移除效果，避免滑鼠滑出頁面又回來會認定是mousedown
4. 監聽mouseleave事件，抓取滑鼠X位置，並設定滾輪位置

課程重點

這次實作的code如下所示，mousedown事件抓取點擊時的X值(e.pageX)及當下的滾輪位置(slider.scrollLeft)。而e.pageX減掉slider.offsetLeft是為了修正div如果有margin造成的偏差。

而mouseleave和mouseup都只是將class移除。

mousemove事件是持續抓取滑鼠位置，並和點擊時的位置做相減，得到位移距離，再將點擊時的滾輪位置減去這段位移，重新指定給滾輪位置，即可完成拖曳功能。

const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});

slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});

slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});

slider.addEventListener('mousemove', (e) => {
  if (!isDown) return;  // stop the fn from running
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 3;
  slider.scrollLeft = scrollLeft - walk;
});

延伸閱讀

• mouseleave和mouseout差別：當滑鼠游標離開該元素或是其下任何子元素時，會觸發mouseout。而mouseleave只會在游標離開該元素時觸發。